<!doctype html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="height=device-height" />
<title>transform 、transation 和 animation 的使用</title>
<link href="common.css" rel="stylesheet" >
<link href='http://fonts.googleapis.com/css?family=Geostar+Fill' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>

var setEyeOffset = function(event) {
	var grass1 ={left:-288}
	var grass2 ={left:-288}
	var grass3 ={left:-504}
	var w = window.innerWidth;
	var w2 = w / 2;
	var mw = event.clientX;
	
	if(mw > w2){
		var x = (mw - w / 2) / 2;
				$("#grass1").offset({
					left: grass1.left + x/4
				});
				$("#grass2").offset({
					left: grass2.left + x/3
				});
				$("#grass3").offset({
					left: grass3.left + x/2
				});
				$("#animationContent").removeClass("right");
				$("#animationContent").addClass("left");
				$("#animationWarp").removeClass("rightOne");
				$("#animationWarp").addClass("leftOne");
		}else if( mw < w2){
			var x = (w / 2 - mw) / 2;
			$("#grass1").offset({
					left: grass1.left - x/4
				});
			$("#grass2").offset({
					left: grass2.left - x/3
				});
			$("#grass3").offset({
					left: grass3.left - x/2
				});
				$("#animationContent").removeClass("left");
				$("#animationContent").addClass("right");
				$("#animationWarp").removeClass("leftOne");
				$("#animationWarp").addClass("rightOne");
			}
	
};
$(window).mousemove(setEyeOffset);</script>
</head>

<body>
<div id="warp">
  <div id="top">
    <ul id="yun">
      <li id="yun_first"></li>
      <li id="yun_second"></li>
    </ul>
  </div>
  <!-- top end-->
  <div id="content">
    <div class="title">
      <div class="title_name">
        <div class="title_content">
          <h1>CSS</h1>
          <p>Transform、Transition 和 Animation 的简单介绍</p>
        </div>
      </div>
      <div id="title_img" onclick="rotateYDIV()"></div>
    </div>
    <div id="button">
      <div class="button_content">
        <div class="button2">Transition</div>
      </div>
      <div class="button_content">
        <div class="column">
          <div class="button1" onclick="TransformDIV()">Transform</div>
          <div class="button3">Animation</div>
        </div>
      </div>
    </div>
    <!-- title end--> 
  </div>
  <div id="flooter">
    <div id="grass1"></div>
    <div id="grass2"></div>
    <div id="grass3"></div>
  </div>
  <!-- content end --> 
</div>
<!--warp end-->
<div id="transformWarp">
  <div class="soil"></div>
  <div class="titleWarp">
    <div id="rocketrun" class="title_content titleWarp_content">
      <h1>Transform</h1>
      <p>使元素自身发生旋转、扭曲、缩放和移动等基本形态的变化</p>
      <!--  <p><span title="旋转">rotate</span>&nbsp;&nbsp;&nbsp;&nbsp;<span title="扭曲">skew</span>&nbsp;&nbsp;&nbsp;&nbsp;<span title="缩放">scale</span></p>
      <p><span title="移动">translate</span>&nbsp;&nbsp;&nbsp;&nbsp;<span title="矩阵变形">matrix</span></p>-->
      <div class="exhaust flyone"></div>
      <div class="exhaust flytwo"></div>
    </div>
    <!-- titleWarp_content content end [rocket]--> 
  </div>
  <div class="transformContent">
    <div class="transformList translate">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>translate</h2>
          <p>(&lt;length&gt;, &lt;length&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0.  可分解为translateX和translateX </p>
        </div>
      </div>
    </div>
    <!--translate end-->
    <div class="transformList rotate">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>rotate</h2>
          <p>(&lt;angle&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>指定对象的2D rotation（2D旋转）</p>
        </div>
      </div>
    </div>
    <!--rotate end-->
    <div class="transformList scale">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>scale</h2>
          <p>(&lt;number&gt;, &lt;number&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值.  可分解为scaleX和scaleY</p>
        </div>
      </div>
    </div>
    <!--scale end-->
    <div class="transformList skew">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>skew</h2>
          <p>(&lt;angle&gt;, &lt;angle&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0.  可分解为skewX和skewY</p>
        </div>
      </div>
    </div>
    <!--skew end--> 
  </div>
  <!-- transformContent end-->
  <div class="Octopus" onClick="second()" > </div>
</div>
<!--transformWarp end-->
<div id="transitonWarp" onClick="third()">
  <div id="sky"></div>
  <div id="tree">
    <div id="transitonLogo">
      <div id="Rudderbackground"></div>
      <div id="transitonLogoName"></div>
    </div>
  </div>
  <!--++++++++++++++++++++++-->
  <div id="transitonContent">
    <div class="transformList">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>property</h2>
          <p>(all|none|&lt;property&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>设置对象中的参与过渡的属性.	&lt;property&gt;指定要进行过渡的css属性可以为多个</p>
        </div>
      </div>
    </div>
    <!--translate end-->
    <div class="transformList rotate">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>duration</h2>
          <p>(&lt;time&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>设置对象过渡的持续时间</p>
        </div>
      </div>
    </div>
    <!--rotate end-->
    <div class="transformList scale">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>timing-function</h2>
          <p>(&lt;number&gt;, &lt;number&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>设置对象过度的样式或者说是类型.  linear[线性过渡]/ease[平滑过渡]/ease-in[由慢到快]/ease-in-out[由慢到快再到慢]</p>
        </div>
      </div>
    </div>
    <!--scale end-->
    <div class="transformList skew">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>delay</h2>
          <p>(&lt;time&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>设置对象延迟过渡的时间</p>
        </div>
      </div>
    </div>
    <!--skew end--> 
  </div>
</div>
<!--++++++++++++++++++++++-->

</div>
<!--transitonWarp end-->
<div id="animationWarp" class="animationTop">
  <div id="animationContent" class="animationContent"> 
  	
    <!--++++++++++++++++++++++++++-->
    <div id="animationC">
    <div id="moon">
    	<div id="moonoff" class="moon"></div>
    </div>
    <div class="transformList">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>iteration-count</h2>
          <p>(infinite | &lt;number&gt;)</p>
        </div>
        <div class="transformheader-content">
          <p>设置动画的重复次数，infinite为无限循环，&lt;number&gt;根据输入数值有限循环</p>
        </div>
      </div>
    </div>
    <!--translate end-->
    <div class="transformList rotate">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>direction</h2>
          <p>(normal | alternate)</p>
        </div>
        <div class="transformheader-content">
          <p>设置对象动画在循环中是否反向运动，normal表示不设置，alternate表示正常与反向交替（也就是往返运动）</p>
        </div>
      </div>
    </div>
    <!--rotate end-->
    <div class="transformList scale">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>play-state</h2>
          <p>(running | paused)</p>
        </div>
        <div class="transformheader-content">
          <p>设置动画在运动中突然暂停和再次被激活</p>
        </div>
      </div>
    </div>
    <!--scale end-->
    <div class="transformList skew">
      <div class="transformheader">
        <div class="transformheader-title">
          <h2>fill-mode</h2>
          <p>(none | forwards | backwards | both)</p>
        </div>
        <div class="transformheader-content">
          <p>规定动画在播放之前或之后，其动画效果是处于什么状态</p>
        </div>
      </div>
    </div>
    <!--skew end--> 
  </div>
  <div id="animationBottom"></div>
  </div>
  <!--++++++++++++++++++++++++++-->

</div>
</div>
<!--animationWarp end-->
</body>
</html>
<script>

var logo = document.getElementById('title_img');
var warp = document.getElementById('warp');
var transformWarpIn = document.getElementById('transformWarp');
var transitonWarp = document.getElementById('transitonWarp');

function rotateYDIV(){
	logo.className='title_img';
}
function TransformDIV(){
	warp.className='warpout';
	transformWarpIn.className='transformWarpIn';
	$('#rocketrun').addClass('rocketshow');
	
}
function second(){
	$('#transformWarp').addClass('transformWarpOut').css({top:0});
	transitonWarp.className='transitonWarpIn';
}
function third(){
	$('#transitonWarp').addClass('transitonWarpOut')
	$('#animationWarp').addClass('animationWarpIn');
	}
</script>